<template>
	<view class="tabbar">
		<view class="tabbar-list">
			<view class="tabbar-list-ul">
				<view class="tabbar-list-li" v-for="(item, index) in tabBar.list" :key="index"
					@click="setSelected(index)">
					<view class="tabbar-list-li-icon">
						<image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
					</view>
					<view :class="selected == index ? 'tabbar-list-li-name active' : 'tabbar-list-li-name'">
						{{ item.text }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import methods from "@/pages/index/tabbar.js"
	import {
		mapState
	} from 'vuex' //引入mapState
	export default {
		props: {
			selected: {
				type: Number,
				default: () => 0
			},
			colorblean: {
				type: Boolean,
				default: () => false
			}
		},
		name: "myTabbar",
		data() {
			return {
				tabBar: {
					list: [{
							text: '首页',
							pagePath: '/pages/index/index',
						},
						{
							text: '提问',
							pagePath: '/pages/question/question',
						},
						{
							text: '答主',
							pagePath: '/pages/mainquestionlist/mainquestionlist',
						},
						{
							text: '我的',
							pagePath: '/pages/me/me',
						}
					]
				}
			}
		},
		computed: {
			...mapState({
				tabBarImg: state => state.remote?.tabBarImg?.data_list ?? [],
			})
		},
		mounted() {
			this.querySections().then(res => {
				this.tabBar.list.map(item => {
					if(item.text=='首页'){
						item.iconPath = this.queryImage("主页1")
						item.selectedIconPath = this.queryImage("主页2")
					}
					if(item.text=='提问'){
						item.iconPath = this.queryImage("提问1")
						item.selectedIconPath = this.queryImage("提问2")
					}
					if(item.text=='答主'){
						item.iconPath = this.queryImage("答主1")
						item.selectedIconPath = this.queryImage("答主2")
					}
					if(item.text=='我的'){
						item.iconPath = this.queryImage("个人1")
						item.selectedIconPath = this.queryImage("个人2")
					}
				})
			});
		},
		methods: {
			...methods,
			queryImage(label,key="tabBarImg") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			setSelected(index) {
				uni.switchTab({
					url: this.tabBar.list[index].pagePath
				})
			}
		},

	}
</script>

<style>
	.tabbar {
		width: 100%;
		height: 150rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		z-index: 999;
		padding: 0 20rpx;
		background-color: #f4f4f4;
	}

	.tabbar-list {
		width: 95%;
		/* background: linear-gradient(180deg, #3c454b 0%, #1f2428 100%);
		 */
		background-color: #fff;
		position: fixed;
		height: 102rpx;
		border-radius: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		box-sizing: border-box;
		box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.26);
		z-index: 99999;
		margin-bottom: 30rpx;
	}

	.tabbar-list-ul {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
	}

	.tabbar-list-li-icon {
		width: 40rpx;
		height: 40rpx;
		margin: 0 auto;
		/* padding: 20rpx 0; */
		padding: 5rpx 20rpx 5rpx 20rpx;
	}

	.tabbar-list-li-icon image {
		width: 40rpx;
		height: 40rpx;
	}

	.tabbar-list-li-name {
		width: 100%;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		color: #8f9193;
	}

	.active {
		color: #04b0ff;
	}
</style>